import React, { useEffect } from 'react';
import { NavigationContainer, createNavigation, themeService } from '@gaozh1024/rn-toolkit';
import {
  HomeTabScreen, ProfileTabScreen,
  SCREEN_LIST,
  LAYOUT_SCREEN_LIST,
  UI_SCREEN_LIST,
  FEEDBACK_SCREEN_LIST,
  UTILS_SCREEN_LIST,
} from './src/screens';
import { SCREEN_NAMES, SCREEN_TITLES, SCREEN_ICONS } from './src/config';
import { lightThemeColors, darkThemeColors } from './src/theme';
import { initIconfont } from './src/assets';
import DownloadModal from './src/screens/modal/DownloadModal';
import CenterModal from './src/screens/modal/CenterModal';
import BottomModal from './src/screens/modal/BottomModal';



function App() {

  const NavigationComponent = createNavigation()
    .setActiveColor('#007AFF')
    .setInactiveColor('#8E8E93')
    // .setLeftDrawer({
    //   content: IconButtonTestScreen,
    //   width: 300,
    //   drawerType: 'slide',
    // })
    .addTabs([
      {
        name: SCREEN_NAMES.HOME_TAB,
        label: SCREEN_TITLES[SCREEN_NAMES.HOME_TAB],
        component: HomeTabScreen,
        iconName: SCREEN_ICONS[SCREEN_NAMES.HOME_TAB],
        activeIconName: 'home-outline', // 选中态更换图标
        activeColor: '#f00',         // 仅该 Tab 选中颜色覆盖
        inactiveColor: '#ccc',       // 仅该 Tab 未选中颜色覆盖
      },
      {
        name: SCREEN_NAMES.PROFILE_TAB,
        label: SCREEN_TITLES[SCREEN_NAMES.PROFILE_TAB],
        component: ProfileTabScreen,
        iconName: SCREEN_ICONS[SCREEN_NAMES.PROFILE_TAB],
      },
    ])
    .addStacks(SCREEN_LIST)
    .addStacks(UI_SCREEN_LIST)
    .addStacks(LAYOUT_SCREEN_LIST)
    .addStacks(FEEDBACK_SCREEN_LIST)
    .addStacks(UTILS_SCREEN_LIST)
    // 新增：注册独立 Modal 页面
    .addModal({
      name: 'CenterModal',
      component: CenterModal,
    })
    .addModal({
      name: 'BottomModal',
      component: BottomModal,
    })
    .addModal({
      name: 'DownloadModal',
      component: DownloadModal,
    })
    // 设置初始路由
    .setInitialRoute(SCREEN_NAMES.HOME_TAB)
    .build();

  // 在应用初始化时注入自定义主题颜色（浅色/深色）
  useEffect(() => {
    initIconfont();
    // 覆盖浅色主题颜色
    themeService.updateLightThemeConfig({ colors: lightThemeColors });
    // 覆盖深色主题颜色（如需）
    themeService.updateDarkThemeConfig({ colors: darkThemeColors });
  }, []);

  return (
    <NavigationContainer>
      <NavigationComponent />
    </NavigationContainer>
  );
};

export default App;